import React, { Component } from 'react'
import style from "./classify.module.scss"
import {back_icon} from '../../common/icon/svg'
import {bookTyleClassify} from "../../data/bookType";
const bookCoverDefault = require("../../common/imageDefault/book-cover-default.png").default;

export default class Classify extends Component {
    state={
        active:0,
        list:bookTyleClassify,
    }

    //点击左侧导航
    btn=(i)=>{
        this.right.scrollTo({
            top:i*342,
            behavior:"smooth"
        })
    }
    getTop=(e)=>{
        let index =Math.floor( e.target.scrollTop/342)
            this.setState({
                active:index
            })
    }

    render() {
        return (
            <div className={style.ify}>
                <div className={style.head}>
                    <span onClick={()=>this.props.history.push("/home")}>{back_icon}</span>
                    <span className={style.shou}>全部分类</span>
                </div>
                <div className={style.content}>
                    <ul className={style.left}>
                        {
                            this.state.list.map((item,i)=>{
                                return (
                                <li key={i} className={this.state.active===i?style.active:null} onClick={()=>this.btn(i)}>{item.name}</li>
                                )
                            })
                        }
                    </ul>
                    <div className={style.right} ref={c=>this.right=c} onScroll={this.getTop}>
                        {
                            this.state.list.map((item,i)=>{
                                return (
                                    <div key={i} className={style.list}>
                                        <div className={style.title}>
                                            <span className={style["title-name"]}>{item.name}</span>
                                        </div>
                                        <div className={style.item}>
                                        {
                                            item.children.map((ite,index)=>{
                                                return (
                                                    <div key={index} className={style["item-list"]}
                                                        onClick={()=>{this.props.history.push({
                                                            pathname:"/list",state:[item.name,ite.name]
                                                        })}}
                                                    >
                                                        <img src={ite.cover?ite.cover:bookCoverDefault}></img>
                                                        <p style={{margin:0}}>{ite.name}</p>
                                                    </div>
                                                )
                                            })
                                        }
                                        </div>
                                        
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
